<template>
    <div class="questions_list">
        <student-menu/>
        <div class="head border-radius bg-fff p-1 d-flex between">
            <div class="filters">
                <label >
                    <span>状态:</span>
                    <Select class="w150" v-model="filters.is_reply" @on-change="getList_page(0)">
                        <Option :value="0">未答复</Option>
                        <Option :value="1">已答复</Option>
                        <Option :value="2">全部</Option>
                    </Select>
                </label>
                <label >
                    <span>提问老师姓名:</span>
                    <Select class="w150" v-model="filters.tid" @on-change="getList_page(0)" clearable>
                        <Option :value="val.id" v-for="val in teacherList" :key="val.id">{{val.name}}</Option>
                    </Select>
                </label>
                <label >
                    <span>提问日期:</span>
                    <DatePicker  type="daterange" v-model="between_time" placement="bottom-end" :confirm="false" placeholder="选择日期" style="width: 200px" @on-change="set_date"></DatePicker>
                </label>
            </div>
            <Button type="primary" icon="ios-add-circle-outline" @click="submitShow=true">添加</Button>
        </div>
        <div class="content mt-1">
            <Table :columns="columns" class="diy_table" :data="list"></Table>
            <div class="clearfix mt-2">
                <Page :current.sync="filters.page" :page-size="filters.list_rows" :total="total_page" show-sizer class="float-right" show-total @on-change="getList_page"/>
            </div>
        </div>
       <Modal v-model="detailsShow" class="diy_modal" :title="is_reply?'回复详情':'问题详情'" :footer-hide="true">
            <h4 class="py-1">{{detailsData.title}}</h4>
            <p class="my-1">{{detailsData.content}}</p>
            <div class="files mt-3" v-if="detailsData.file_list.length">
                <span class="mr-1">附件列表：</span>
                <download-list :file_list="detailsData.file_list"/>
            </div>
            <div class="clearfix">
                <div class="float-right">
                    <Button type="primary" class="mr-1" @click="detailsShow=false" >关闭</Button>
                </div>
            </div>
       </Modal>
       <Modal v-model="submitShow" class="diy_modal" title="提交问题" @on-ok="submitAsk">
            <div class="reply">
                <div class="d-flex">
                    <p  style="width:80px;line-height:30px">提交老师</p>
                    <Select class="w-200" v-model="submitFm.tid">
                        <Option v-for="val in teacherList" :value="val.id" :key="val.id">{{val.name}}</Option>
                    </Select>
                </div>
                <div class="d-flex my-2">
                    <p class="mr-1" style="width:80px;line-height:30px">提交主题</p>
                    <Input v-model="submitFm.title"></Input>
                </div>
                <div class="my-2 d-flex">
                    <p class="mr-1" style="width:80px">提交内容</p>
                    <Input v-model="submitFm.content" type="textarea" :autosize="{minRows:4}" />
                </div>
                <div class="d-flex">
                    <p  style="width:80px">附件列表</p>
                    <div class="d-talbe">
                        <upload-button @set_files="set_files"/>
                    </div>
                </div>
            </div>

       </Modal>
    </div>
</template>

<script>
import studentMenu from "@/components/studentMenu"
import pageMixin from "@/common/pageMixin"
import {general_questions,teacher_list,general_question_add,general_questions_view,general_question_delete} from "@/common/sapi"
import {dateFormat,deep_clone} from "@/common/tool"
import uploadButton from "@/components/uploadButton"
export default {
    mixins:[pageMixin],
    data(){
        return {
            between_time:[],
            filters:{
                is_reply:2,
                tid:'',
                between_time:''
            },
            submitFm:{
                tid:0,
                title:'',
                content:'',
                files:''
            },
            submitShow:false,
            detailsShow:false,
            is_reply:false,
            teacherList:[],
            detailsData:{
                title:'',
                content:'',
                file_list:[]
            },
            columns:[
                {
                    title:'提问编号',
                    key:'id',
                },
                {
                    title: '主题',
                    key: 'title'
                },
                {
                    title: '提问老师',
                    key: 'teacher_name'
                },
                {
                    title: '提问时间',
                    key: 'question_time'
                },
                {
                    title: '回复时间',
                    key: 'reply_time'
                },
                {
                    title: '操作',
                    width:400,
                    align: 'center',
                    render:(h,params)=>{
                        const dom=[
                            h('Button',{
                                class:'mr-1',
                                on:{
                                    click:()=>{
                                        general_questions_view({qid:params.row.id})
                                        .then(res=>{
                                            if(res){
                                                this.is_reply=false
                                                this.detailsShow=true
                                                this.detailsData={
                                                    title:res.data.question.title,
                                                    content:res.data.question.content,
                                                    file_list:res.data.question.file_list
                                                }
                                            }
                                        })
                                       
                                    }
                                }
                            },'问题详情'),
                            
                            h('Button',{
                                props:{
                                    ghost:true,
                                    type:'error'
                                },
                                class:'mr-1',
                                on:{
                                    click:()=>{
                                        if(params.row.reply_id){
                                            this.$Notice.warning({
                                                title: '提示',
                                                desc:'已回复的问题不可删除！'
                                            });
                                            return 
                                        }
                                        this.$Modal.confirm({
                                            title:'确认',
                                            content: '确认删除吗？',
                                            onOk:()=>{
                                                general_question_delete({qid:params.row.id})
                                                .then(res=>{
                                                    if(res){
                                                        this.$Notice.success({
                                                            title: '成功',
                                                            desc:'删除成功！'
                                                        });
                                                        this.getList()
                                                    }
                                                })
                                            }
                                        });
                                    }
                                }
                            },'删除')
                        ]
                        if(params.row.reply_id)
                            dom.splice(1,0,h('Button',{
                                props:{
                                    ghost:true,
                                    type:'primary'
                                },
                                class:'mr-1',
                                on:{
                                    click:()=>{
                                        general_questions_view({qid:params.row.id,rid:params.row.reply_id})
                                        .then(res=>{
                                            if(res){
                                                this.is_reply=true
                                                this.detailsShow=true
                                                this.detailsData={
                                                    title:res.data.question.title,
                                                    content:res.data.reply.content,
                                                    file_list:res.data.reply.file_list
                                                }
                                            }
                                        })
                                    }
                                }
                            },'查看回复'))
                        return h('div',dom)
                    }
                }
            ],
            list:[ ],
        }
    },
    methods:{
        set_date(){
            this.filters.between_time=this.between_time[0]?dateFormat(this.between_time[0],'YYYY-mm-dd')+','+dateFormat(this.between_time[1],'YYYY-mm-dd'):''
            this.getList_page()
        },
        set_files(listStr){
            this.submitFm.files=listStr
        },
        getList(){
            const fm=deep_clone(this.filters)
            fm.is_reply=fm.is_reply==2?'':fm.is_reply
            general_questions(fm)
            .then(res=>{
                if(res){
                    this.list=res.data.list
                    this.total_page=res.data.pageinfo.total
                }
            })
        },
        submitAsk(){
            if(!this.submitFm.tid || !this.submitFm.title || !this.submitFm.content){
                this.submitShow=false
                this.$Modal.warning({
                    title: '提交失败',
                    content: '请填写标题、内容和提问老师',
                    onOk:()=>{
                        this.submitShow=true
                    }
                });
                return 
            }
            general_question_add(this.submitFm)
            .then(res=>{
                if(res){
                    this.$Notice.success({
                        title: '成功',
                        desc:'提交成功，请等待老师回复！'
                    });
                    this.getList_page()
                    for (const key in this.submitFm) {
                        this.submitFm[key]=''
                    }
                }
            })
        }
    },
    components:{
        studentMenu,
        uploadButton
    },
    created(){
        this.getList_page()
        teacher_list()
        .then(res=>{
            if(res){
                this.teacherList=res.data.list
            }
        })
    },
    mounted(){
        if(this.$route.query.tid){
            this.submitFm.tid=+this.$route.query.tid
            this.submitShow=true
        }
    }
}
</script>
